<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品店购</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
				<style>
			body {
            	background-color: #ffffff;
        	}
    </style>
	</head>
	<body>
		<form class="layui-form layui-form-pane" lay-filter="myForm" id="app">		
			<input type="hidden" :value="detail.id" id="id" name="id" />
									<div class="layui-col-xs12 layui-col-md6">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">商品名：</label>
					<div class="layui-input-block">
						<input v-model="detail.shangpinming" type="text" name="shangpinming" id="shangpinming" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
												<div class="layui-col-xs12 layui-col-md6">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">照片：</label>
					<div v-if="detail.zhaopian" class="layui-input-block">
						<img id="zhaopianImg" style="width: 91px;height: 91px;" :src="detail.zhaopian">
						<input type="hidden" :value="detail.zhaopian" id="zhaopian" name="zhaopian" />
					</div>
					<div class="layui-input-block">
						<button type="button" class="layui-btn btn-theme" id="zhaopianUpload">
							<i class="layui-icon">&#xe67c;</i>上传照片
						</button>
					</div>
				</div>
			</div>
												<div class="layui-col-xs12 layui-col-md6">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">价格：</label>
					<div class="layui-input-block">
						<input v-model="detail.jiage" type="text" name="jiage" id="jiage" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
												<div class="layui-col-xs12 layui-col-md6">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">生产日期：</label>
					<div class="layui-input-block">
						<input v-model="shengchanriqi" type="text" name="shengchanriqi" id="shengchanriqi" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
												<div class="layui-col-xs12 layui-col-md6">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">保质期：</label>
					<div class="layui-input-block">
						<input v-model="detail.baozhiqi" type="text" name="baozhiqi" id="baozhiqi" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
																					<div class="layui-col-xs12 layui-col-md6">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">类别</label>
					<div class="layui-input-block">
						<select v-model="detail.leibie" name="leibie" id="leibie" lay-filter="leibie">
							<option value="">请选择</option>
							<option v-for="(item,index) in leibie" v-bind:key="index" :value="item">{{item}}</option>
						</select>
					</div>
				</div>
			</div>
																											
																																							<div class="layui-col-xs12 layui-col-md12">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">详情：</label>
					<div class="layui-input-block">
						<textarea v-model="detail.xiangqing" name="xiangqing" id="xiangqing">请输入详情</textarea>
					</div>
				</div>
			</div>
																								
			<div class="layui-form-item">
				<div class="layui-input-block" style="text-align: right;margin-right: 30px;">
					<button class="layui-btn btn-submit" lay-submit lay-filter="*">提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
		<script src="../../js/utils.js" charset="utf-8"></script>
		<script src="../../js/validate.js" charset="utf-8"></script>
		<script src="../../js/vue.js" charset="utf-8"></script>
				<script>
			var vue = new Vue({
				el: '#app',
				data: {
                    																																																																						leibie: [],
																																			detail: {
                                                                        shangpinming: '',
                                                                                                zhaopian: '',
                                                                                                jiage: '',
                                                                                                shengchanriqi: '',
                                                                                                baozhiqi: '',
                                                                                                xiangqing: '',
                                                                                                leibie: '',
                                                                                                clicktime: '',
                                                                                                clicknum: '',
                                                                    }
				},
				updated: function() {
					layui.form.render('select', 'myForm');
				},
                computed: {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },
				methods: {
					jump(url) {
						jump(url)
					}
				}
			})

			layui.use(['layer', 'element', 'carousel', 'jquery', 'form', 'upload', 'laydate','tinymce','http'], function() {
				var layer = layui.layer;
				var element = layui.element;
				var carousel = layui.carousel;
				var http = layui.http;
				var jquery = layui.jquery;
				var form = layui.form;
				var upload = layui.upload;
				var laydate = layui.laydate;
                var tinymce = layui.tinymce

				
                																// 上传图片
				var zhaopianUpload = upload.render({
					//绑定元素
					elem: '#zhaopianUpload',
					//上传接口
					url: http.baseurl + 'file/upload',
					// 请求头
					headers: {
						Token: localStorage.getItem('Token')
					},
					// 允许上传时校验的文件类型
					accept: 'images',
					before: function() {
						//loading层
						var index = layer.load(1, {
							shade: [0.1, '#fff'] //0.1透明度的白色背景
						});
					},
					// 上传成功
					done: function(res) {
						console.log(res);
						layer.closeAll();
						if (res.code == 0) {
							layer.msg("上传成功", {
								time: 2000,
								icon: 6
							})
							var url = http.baseurl + 'upload/' + res.file;
							jquery('#zhaopian').val(url);
							jquery('#zhaopianImg').attr('src', url)
                            vue.detail.zhaopian = url;
						} else {
							layer.msg(res.msg, {
								time: 2000,
								icon: 5
							})
						}
					},
					//请求异常回调
					error: function() {
						layer.closeAll();
						layer.msg("请求接口异常", {
							time: 2000,
							icon: 5
						})
					}
				});
																								laydate.render({
					elem: '#shengchanriqi',
					type: 'datetime'
				});
                																                var edit = tinymce.render({
                    elem: "#xiangqing",
                    height: 600,
                    images_upload_handler: function(blobInfo, succFun, failFun) {
                        var xhr, formData;
                        var file = blobInfo.blob(); //转化为易于理解的file对象
                        xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', http.baseurl + 'file/upload');
                        xhr.setRequestHeader("Token", localStorage.getItem('Token')); //设置请求头
                        xhr.onload = function() {
                            var json;
                            if (xhr.status != 200) {
                                failFun('HTTP Error: ' + xhr.status);
                                return;
                            }
                            json = JSON.parse(xhr.responseText);
                            if (!json || typeof json.file != 'string') {
                                failFun('Invalid JSON: ' + xhr.responseText);
                                return;
                            }
                            succFun(http.baseurl + '/upload/' + json.file);
                        };
                        formData = new FormData();
                        formData.append('file', file, file.name); //此处与源文档不一样
                        xhr.send(formData);
                    }
                }, (opt) => {

                });
																http.request(`option/shangpinleibie/leibie`,'get',{},(res)=>{
					vue.leibie = res.data
				});
																laydate.render({
					elem: '#clicktime',
					type: 'datetime'
				});
                																
                                // session独取
				let table = localStorage.getItem("userTable");
				http.request(`${table}/session`, 'get', {}, function(data) {
					// 表单赋值
					//form.val("myForm", data.data);
					data = data.data
					for(var key in data){
						vue.detail[`${key}`] = data[`${key}`]
					}
				});
                
                // 跨表计算
                if(http.getParam('corss')){
					var obj = JSON.parse(localStorage.getItem('crossObj'));
					//form.val("myForm", obj);
					for(var key in obj){
						vue.detail[`${key}`] = obj[`${key}`]
					}
				}
				
                																																																																								
				// 提交
				form.on('submit(*)', function(data) {
					data = data.field;
					
                    // 数据校验
					                    										                                                                                                                        					                                        										                                                                                                                        					                                        										                                        if(!isIntNumer(data.jiage)){
                        layer.msg('价格应输入整数', {
							time: 2000,
							icon: 5
						});
                        return false
                    }
                                                                                                                        					                                        										                                                                                                                        					                                        										                                        if(!isIntNumer(data.baozhiqi)){
                        layer.msg('保质期应输入整数', {
							time: 2000,
							icon: 5
						});
                        return false
                    }
                                                                                                                        					                                        					var xiangqing = tinymce.get('#xiangqing').getContent()
					data.xiangqing = xiangqing;
															                                                                                                                        					                                        										                                                                                                                        					                                        										                                                                                                                        					                                        										                                                                                                                        					                    
					// 跨表计算
					                                                                                                                                                                                                                                                                                                                                                                        					
                    // 比较大小
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                					
					// 提交数据
					http.requestJson('shangpindiangou' + '/update', 'post', data, function(res) {
					 	layer.msg('提交成功', {
					 		time: 2000,
					 		icon: 6
					 	}, function() {
					 		window.parent.location.reload();
						});
					 });

					return false
				});

				http.request(localStorage.getItem('sessionTable') + '/session', 'get', {}, (res) => {
					form.val(res.data)
					vue.detail = res.data;
				})

			});
		</script>
	</body>
</html>
